<template>
  <div
    class="sim-controller-container"
    :style="{
      color: themeStyle[theme].textColor2
    }"
  >
    <div class="sim-status-container">
      <div class="sim-status">
        <span>状态控制：</span>
        <div class="status-btns">
          <span
            :style="{ color: simState === 'stopped' ? '#D9534F' : undefined }"
            @click="simControllerStore.toggleSimState('stopped')"
            >停止</span
          >
          <span
            :style="{ color: simState === 'running' ? '#5CB85C' : undefined }"
            @click="simControllerStore.toggleSimState('running')"
            >运行</span
          >

          <span
            :style="{ color: simState === 'paused' ? '#F0AD4E' : undefined }"
            @click="simControllerStore.toggleSimState('paused')"
            >暂停</span
          >
          <span v-if="simState === 'paused'" @click="simControllerStore.toggleSimState('resume')"
            >恢复</span
          >
        </div>
      </div>
    </div>
    <div class="sim-speed-container">
      <span>仿真速度：</span>
      <div class="sim-speed-slider">
        <Slider
          v-model:value="simSpeed"
          :min="1"
          :max="20"
          :step="1"
          :tooltip-open="false"
          @after-change="simControllerStore.setSimSpeed"
        />
      </div>
      <Input
        v-model:value="simSpeed"
        size="small"
        type="number"
        :min="1"
        :max="20"
        :step="1"
        style="width: 100px; margin-left: 10px"
        @blur="simControllerStore.setSimSpeed"
      />
    </div>
    <div class="sim-time-container">
      <div class="sim-time-item">
        <span>开始时间：</span>
        <span>{{ startTime === 0 ? 0 : dayjs(startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
      <div class="sim-time-item">
        <span>模拟时间：</span>
        <span>{{
          startTime === 0 ? 0 : dayjs(startTime + simTime * 1000).format('YYYY-MM-DD HH:mm:ss')
        }}</span>
      </div>
      <div class="sim-time-item">
        <span>进行时间：</span>
        <span>{{ formatSeconds(simTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSimControllerStore } from '@renderer/store/message/simController'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { formatSeconds } from '@renderer/utils/utils'
import { Input, Slider } from 'ant-design-vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const simControllerStore = useSimControllerStore()
const { simSpeed, simTime, startTime, simState } = storeToRefs(simControllerStore)
</script>

<style scoped lang="scss">
.sim-controller-container {
  height: calc(100% - 40px);
  padding: 5px;
  overflow-y: auto;

  /* 设置滚动条样式 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cccccc85;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa85;
  }
  .sim-status-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
    height: 30px;
    .sim-status {
      display: flex;
      justify-content: left;
      align-items: center;
      .status-btns {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 10px;
        span {
          width: 40px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .sim-speed-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    height: 30px;
    .sim-speed-slider {
      width: 250px;
      :deep(.ant-slider-track) {
        background-color: #38a0ff;
      }
      :deep(.ant-slider-handle::before) {
        width: 13px;
        height: 8px;
        border-radius: 5px;
      }
      :deep(.ant-slider-handle::after) {
        width: 13px;
        height: 8px;
        border-radius: 5px;
        transform: translateY(1px);
        box-shadow: 0 0 0 2px #38a0ff;
      }
    }
    :deep(.ant-input-sm) {
      border-radius: 0px;
    }
  }
  .sim-time-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
    height: 30px;
  }
}
</style>
